<template>
   <scroll-view>
	 <view class="grace-body">
		<view class="title">
			<text>基本查询 </text>
		</view>
		<form @submit="formSubmit" class="grace-form grace-margin-top">
			<view class="grace-items">
				<view class="grace-label">年龄</view>
				<input type="number" class="input" name="nickname" placeholder="请输入年龄" />
			</view>
			<view class="grace-items">
				<view class="grace-label">性别</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="gender[genderIndex]" :range="gender" name="gender">
						<text>{{gender[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label">手机号</view>
				<view class="other">
					<picker @change="bindPhoneChange" :value="Phone[phoneIndex]" :range="Phone" name="use">
						<text>{{Phone[phoneIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label" style="width: 100px;">手机号使用时间</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="gender[genderIndex]" :range="gender" name="gender">
						<text>{{gender[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items grace-noborder">
				<view class="grace-label">芝麻信用分</view>
				<input type="number" class="input" name="credit" placeholder="请输入信用分" />
			</view>
		   <view class="grace-items">
					<view class="grace-label">居住城市</view>
					<view @click="cityPicker1">
						{{cityText1}}
						<text class="grace-icons icon-arrow-right"></text>
					</view>
		   	</view>
		   <view class="title">
		   	<text>其他信息 </text>
		   </view>
		   <view class="grace-items">
		   	<view class="grace-label">学历</view>
		   	<view class="other">
		   		<picker @change="bindPickerChange" :value="education[genderIndex]" :range="education" name="education">
		   			<text>{{education[genderIndex]}}</text>
		   		</picker>
		   	</view>
		   </view>
		   <view class="grace-items">
		   	<view class="grace-label" style="width: 100px;">学信网学历</view>
		   	<view class="other">
		   		<picker @change="bindPickerChange" :value="Checkeducation[genderIndex]" :range="Checkeducation" name="Checkeducation">
		   			<text>{{Checkeducation[genderIndex]}}</text>
		   		</picker>
		   	</view>
		   </view>
		  <view class="grace-items">
		  	 <view class="grace-label">淘宝值</view>
			 <input type="number" class="input" name="nickname" placeholder="请输入淘宝值" />
		 </view>
		  <view class="grace-items">
		  	<view class="grace-label" style="width: 100px;">淘宝消费记录</view>
		  	<view class="other">
		  		<picker @change="bindPickerChange" :value="taobaoCalendar[genderIndex]" :range="taobaoCalendar" name="taobaoCalendar">
		  			<text>{{taobaoCalendar[genderIndex]}}</text>
		  		</picker>
		  	</view>
		  </view>
		  
		  <view class="grace-items">
		  	<view class="grace-label" style="width: 100px;">京东消费记录</view>
		  	<view class="other">
		  		<picker @change="bindPickerChange" :value="jdCalendar[genderIndex]" :range="jdCalendar" name="jdCalendar">
		  			<text>{{jdCalendar[genderIndex]}}</text>
		  		</picker>
		  	</view>
		  </view>
		   <view class="grace-items">
				<view class="grace-label">消费笔数</view>
				<input type="number" class="input" name="phoneno" placeholder="请输入消费笔数"></input>
		    </view>
		
		   <view class="grace-items">
		   	<view class="grace-label" style="width: 100px;">信用卡使用时间</view>
		   	<view class="other">
		   		<picker @change="bindPickerChange" :value="jdCalendar[genderIndex]" :range="jdCalendar" name="jdCalendar">
		   			<text>{{jdCalendar[genderIndex]}}</text>
		   		</picker>
		   	</view>
		   </view>
	        <view class="grace-items">
	        	<view class="grace-label">信用卡银行</view>
	        	<view class="other">
	        		<picker @change="bindPickerChange" :value="creditCard[genderIndex]" :range="creditCard" name="creditCard">
	        			<text>{{creditCard[genderIndex]}}</text>
	        		</picker>
	        	</view>
	        </view>
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">最大透支信用卡额度</view>
				<input type="number" class="input" name="phoneno" placeholder="请输入数字"></input>
			 </view>
			<view class="grace-items">
				<view class="grace-label">28家银行</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="bank[genderIndex]" :range="bank" name="bank">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label">房贷银行</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="bank[genderIndex]" :range="bank" name="bank">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label">还款时间</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="creditCard[genderIndex]" :range="creditCard" name="creditCard">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">月还款额度</view>
				<input type="number" class="input" name="phoneno" placeholder="月缴基数"></input>
			 </view>
	
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">公积金</view>
				<input type="number" class="input" name="phoneno" placeholder="月缴基数"></input>
			 </view>
			<view class="grace-items">
				<view class="grace-label">时长</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="creditCard[genderIndex]" :range="creditCard" name="creditCard">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">社保</view>
				<input type="number" class="input" name="phoneno" placeholder="月缴基数"></input>
			 </view>
			<view class="grace-items">
				<view class="grace-label">时长</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="creditCard[genderIndex]" :range="creditCard" name="creditCard">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">打卡工资</view>
				<input type="number" class="input" name="phoneno" placeholder="月缴基数"></input>
			 </view>
			<view class="grace-items">
				<view class="grace-label">时长</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="creditCard[genderIndex]" :range="creditCard" name="creditCard">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">保单</view>
				<input type="text" class="input" name="phoneno" placeholder="公司名称"></input>
			 </view>
			 <view class="grace-items">
			 	<view class="grace-label" style="width: 120px;">缴费数额</view>
			 	<input type="text" class="input" name="phoneno" placeholder="年缴数额"></input>
			  </view>
			 <view class="grace-items">
			 	<view class="grace-label">年限</view>
			 	<view class="other">
			 		<picker @change="bindPickerChange" :value="creditCard[genderIndex]" :range="creditCard" name="creditCard">
			 			<text>{{bank[genderIndex]}}</text>
			 		</picker>
			 	</view>
			 </view>
			<view class="grace-items">
			<view class="grace-label">微粒款</view>
			<view class="grace-label-x">
				<radio-group name="danxuan">
					<label><radio value="1"></radio>有</label>
					<label><radio value="2"></radio>无</label>
				</radio-group>
			</view>
			</view>
			<view class="grace-items">
				<view class="grace-label">车</view>
				<view class="grace-label-x">
					<radio-group name="danxuan">
						<label><radio value="1"></radio>全款</label>
						<label><radio value="2"></radio>按揭</label>
					</radio-group>
				</view>
			</view>
			<view class="grace-items">
				<view class="grace-label" style="width: 120px;">半年内申请网贷次数</view>
				<input type="number" class="input" name="phoneno" placeholder="贷款次数"></input>
			 </view>	 
			 <view class="grace-items">
			 	<view class="grace-label">营业执照</view>
			 	<view class="other">
			 		<picker @change="bindPickerChange" :value="bank[genderIndex]" :range="bank" name="bank">
			 			<text>{{bank[genderIndex]}}</text>
			 		</picker>
			 	</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="bank[genderIndex]" :range="bank" name="bank">
						<text>{{bank[genderIndex]}}</text>
					</picker>
				</view>
			 </view>
			 <view class="grace-items">
			 	<view class="grace-label">邮箱账单</view>
			 	<view class="grace-label-x">
			 		<radio-group name="danxuan">
			 			<label><radio value="1"></radio>有</label>
			 			<label><radio value="2"></radio>无</label>
			 		</radio-group>
			 	</view>
			 </view>
			<view style="padding:22rpx 0;">
			<button formType="submit" type="primary" style="width:100%;">提交</button>
			</view>
		</form>
		  <!-- 数字键盘组件 -->
	<graceNumberKeyboard 
		:show="graceNumberKeyboardShow" 
		v-on:keyboardDone="keyboardDone" 
		v-on:keyboardInput="keyboardInput" 
		v-on:keyboardDelete="keyboardDelete">
	</graceNumberKeyboard>
		<!-- 三级联动 -->
		 <mpvue-city-picker 
			:themeColor="themeColor" 
			ref="mpvueCityPicker1" 
			:pickerValueDefault="cityPickerValueDefault1" 
			@onCancel="onCancel1" 
			@onConfirm="onConfirm1">
	   </mpvue-city-picker>
	 </view>
</scroll-view>	
</template>
<script>
var  graceChecker = require("../../graceUI/jsTools/graceChecker.js");
import graceNumberKeyboard from '../../graceUI/components/graceNumberKeyboard.vue'
import mpvuePicker from '../../graceUI/threeComponents/mpvuePicker.vue';
import mpvueCityPicker from '../../graceUI/threeComponents/mpvueCityPicker.vue';
import graceSelectTags from "../../graceUI/components/graceSelectTags.vue"
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
export default {
	data() {
		return {
		genderIndex: 0,
		phoneIndex:0,
		gender : ['请选择', '男', '女'],
		Phone:["请选择","3个月以下","3个月至6个月","6个月至12个月","12个月以上"],
		education:["初中以下","中专、职专","高中","大专","本科","研究生以上"],
		Checkeducation:["不可查","可查"],
		jdCalendar:['近半年有消费记录','近半年无消费记录'],
		taobaoCalendar:["三个月内有消费记录","三个月内无消费记录"],
		creditCard:["半年以内","半年","一年","一年以上"],
		bank:["中国银行","工商银行"],
		dateValue : "请选择",
		graceNumberKeyboardShow : false,
		numberVal : '',
		themeColor: '#007AFF', //颜色
		cityText1 : "点击选择", //文本
		cityPickerValueDefault1 : [0,0,1], //默认选项
		//记录全部信息用于表单提交
		city1 : null,
		items: [
				{checked : false, text : "读书"},
				{checked : true , text : "音乐"},
				{checked : false, text : "美术"},
				{checked : false, text : "体育"}
		   ]
		}
	},

	methods:{ 
		bindPickerChange:function(e){
			console.log(e);
			this.genderIndex = e.detail.value;
		},
		bindPhoneChange:function(e){
			this.phoneIndex = e.detail.value;
		},
		bindDateChange : function(e){
			this.dateValue = e.detail.value;
		},
		showKeyboard : function () {
			//打开数字键盘
			this.graceNumberKeyboardShow = true;
		 },
			 // 监听输入
			keyboardInput : function(e){
				this.numberVal = this.numberVal + '' + e;
			},
			// 监听删除
			keyboardDelete : function(){
				this.numberVal = this.numberVal.substring(0, this.numberVal.length - 1);
			},
			// 完成事件
			keyboardDone : function(){
				this.graceNumberKeyboardShow = false;
			},
		//城市联动
			cityPicker1 : function(){
						this.$refs.mpvueCityPicker1.show();
					},
			//获取城市联动值
			onConfirm1(e) {
				var cityText1  = e.label;
				var cityValue1 = e.value;
				var cityCode1  = e.cityCode;
				console.log(cityText1, cityValue1, cityCode1);
				this.cityText1 = cityText1;
				this.cityPickerValueDefault1 = cityValue1;
				this.city1 = e;
			},
        //单选框
		change1 : function(val){
					this.demo1Val = val;
				},
		 formSubmit : function(e){
			//定义表单规则
			var rule = [
				{name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
				{name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
				{name: "phoneno", checkType: "phoneno", checkRule: "", errorMsg: "请正确填写手机号" },
				{name:"email", checkType : "email", checkRule:"3个月以下,3个月至6个月,6个月至12个月, 12个月以上",  errorMsg:"请填写您正确使用时间"},
				{name:"use", checkType : "in", checkRule:"",  errorMsg:"请填写您的邮箱"}
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
				uni.showToast({title:"验证通过!", icon:"none"});
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
			//表单验证
			if(this.city1 == null ){
				uni.showToast({title : "请选择城市", icon:"none"});
				return ;
			}
		}
	},
	 components:{
		 graceNumberKeyboard,
		 mpvuePicker,
		 mpvueCityPicker,
		 graceSelectTags,
		 graceCheckBtn
	}
}
</script>
<style scoped>
 .title{
  width: 100%;
  height: 15px;
  line-height: 15px;
  color:#000000;
  margin-top: 20px;
}
.title::after{
  position: absolute;
  content: " ";  
  width: 5px;
  height: 15px;
  background: #007aff;
  left: 5px;
}
 .grace-form uni-picker uni-text {
    color: grey;
    font-size: 13px;
}
</style>